<template>
  <video ref="webrtcVideo" controls autoplay style="width: 100%; height: 100%;margin-top: -20px;"></video>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';

const videoSrc = ref('webrtc://119.23.218.147/live/livestream');
const player = ref(null);
const webrtcVideo = ref(null);

const initVideo = async (url) => {
  if (player.value) {
    player.value.destroy();
    player.value = null;
  }

  await nextTick(); // Wait for the next update cycle to ensure the DOM is updated.

  if (webrtcVideo.value) {
    player.value = new JSWebrtc.Player(url, {
      video: webrtcVideo.value,
      autoplay: true,
      onPlay: (obj) => {
        webrtcVideo.value.addEventListener('canplay', function () {
          webrtcVideo.value.play();
        });
        console.log(obj, 'Player started playing!');
      },
    });
  }
};

onMounted(() => {
  initVideo(videoSrc.value);

  // Watch for changes in video source
  watch(videoSrc, (newVal) => {
    if (newVal) {
      initVideo(newVal);
      console.log('Playing video from:', newVal);
    }
  }, { immediate: true });
});

onBeforeUnmount(() => {
  if (player.value) {
    player.value.destroy();
  }
});
</script>

<style scoped>
/* 在你的样式表中添加以下样式 */

/* 移除黑色背景 */
video {
  background-color: transparent !important;
}

/* 移除留白空间 */
video::-webkit-media-controls {
  background-color: transparent !important;
}

/* 隐藏默认的黑色头部 */
video::-webkit-media-controls-panel {
  background-color: transparent !important;
}

/* 隐藏播放按钮，如果需要 */
video::-webkit-media-controls-play-button {
  display:none !important;
}

/* 隐藏音量控制，如果需要 */
video::-webkit-media-controls-volume-slider {
  display:none !important;
}


</style>
